<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Javascript Emotifier by Usama Ejaz - Graphical Emoticons</title>
<meta name="description" content="Emotify your webpage with this tiny code which replaces emoticon codes or their symbols with their graphical images. This is Javascript Emotifier by Usama Ejaz" />
<meta name="keywords" content="javascript emoticons, javascript emotify, javascript emotifier, usamaejaz, jquery emotifier, graphical emoticons javascript, javascript emoticons rendering, javascript graphical emoticons" />
<meta name="robots" content="noindex, nofollow" />
<meta name="copyright" content="Usama Ejaz" />
<meta name="author" content="Usama Ejaz" />
<meta name="distribution" content="global" />
<meta name="rating" content="general" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var displayemoticons = "#topleft,.emotes";
</script>
<script type="text/javascript" src="//usamaejaz-html-files.googlecode.com/git/emoticons/emoticons.js"></script>
<link type="text/css" rel="stylesheet" href="//usamaejaz-html-files.googlecode.com/git/emoticons/style.css" />
</head>
<body>
<div id="container">
<div id="intro"><h3>Javascript Emotifier v0.5 - Graphical Emoticons <span id="topleft" class="textsmall" style="float:right;">:) :D ;)</span></h3>
Hello there!
<br/>
Here is a simple javascript which replaces emoticon codes or their symbols with their graphical images. 
<br/>
It will replace simple emoticons like <b>:)</b> ,  <b>;)</b> ,  <b>:))</b> , <b>:D</b> and <b>:P</b> this and that <b>3)</b> with their relative images (img tags).
</div>
<noscript><div style="z-index:1000;position:fixed;height:100%;width:100%;top:0px;right:0px;bottom:0px;left:0px;background:#FFF;margin:0 auto;padding-top:25px;text-align:center;text-size:50px;" >
Javascript is disabled. Enable it to see this script in action. May be you need to update your <a href="http://browsehappy.com/" target="_blank">browser</a> if you are using a silly one. <br/><a href="nojs.html">I know. Continue</a>
</div></noscript>
<div id="emotes">
<span class="textlarge"><b>Emoticons</b></span><br/><br/>
<span class="textmedium"><b>Demo:</b></span><br/>
Here is a demo text :) with some :o emoticon symbols :( :'( or codes :)). This text will be emotified using this script ;) :P :p.
This is fun 3) . Here is a heart <3. Its really fun :D :d. Your webpage looks cool with it. (y) (Y)<br/>Its cool 8) B|. So why are you waiting for? >_<
<br/><br/>
<span class="textmedium"><b>Emotified:</b></span><br/>
<div class="emotes">
Here is a demo text :) with some :o emoticon symbols :( :'( or codes :)). This text will be emotified using this script ;) :P :p.
This is fun 3) . Here is a heart <3. Its really fun :D :d. Your webpage looks cool with it. (y) (Y)<br/>Its cool 8) B|. So why are you waiting for? >_<
<br/><br/>
</div>
</div>
<div id="javascript">
<span class="textlarge"><b>The Script</b></span><br/><br/>
<span class="jq">If you have not included <a href="https://developers.google.com/speed/libraries/devguide#jquery" target="_blank">jQuery</a> already than copy the following script and paste in withing the HEAD tag of your page.<br/>
<textarea rows="1" cols="82" style="border:1.5px solid grey;margin-bottom:20px;" onclick="this.focus();this.select()" readonly="readonly">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</textarea></span>
<br/><br/>
Place the following code within the <b>HEAD</b> tag of your page.<br/>Select and copy all (CTRL + C)
<br/><br/>
<textarea rows="15" cols="82" style="border:1.5px solid grey;margin-bottom:20px;" onclick="this.focus();this.select()" readonly="readonly">
<!-- 

/***********************************************
* Javascript Emotifier v0.5 by Usama Ejaz
* Requirements: jQuery - (1.x.x) recommended
* This notice MUST stay intact for legal use
* Connect with me: twitter.com/usamaejaz ; fb.com/5IL3NT.H4CK3R ; osamaejaz1[at]gmail.com
***********************************************/

-->
<script type="text/javascript">
var displayemoticons = "#emoticons,#container"; // tag(id) in which you want emoticons to be rendered. See  at http://usamaejaz-html-files.googlecode.com/git/emoticons/emoticons.html#customization
</script>
<script type="text/javascript" src="//usamaejaz-html-files.googlecode.com/git/emoticons/emoticons.js"></script>
<!-- End Javascript Emotifier v0.5 -->
</textarea>
</div>
<div id="customization">
<span class="textlarge"><b>Customization</b></span><br/><br/>
<code style="color:black;background:grey;"><b>var displayemoticons = "#emoticons,#container";</b></code> <br/>
Replace the value of <b><i>displayemoticons</i></b> to the id or class of the div or any other tag in which you want the graphical emoticons to render. If you place <b><i>"body"</i></b> in it than the emoticons will be rendered on your whole page. In this case, the above value will be: <i>var displayemoticons = "body";</i>
</div>
<div id="footer">
<span class="textlarge"><b>Thoughts?</b></span><br/><br/>
If you have any thought, suggestion or any comment than drop me an email at: <i>osamaejaz1[at]gmail.com</i><br/>
Or connect with me at: <br/><a style="text-decoration:none;" href="http://www.facebook.com/5IL3NT.H4CK3R" title="Facebook" target="_blank">Facebook</a> | <a style="text-decoration:none;" href="http://twitter.com/usamaejaz" title="Twitter" target="_blank">Twitter</a>
</div>
</div>
</body>
</html>